<template>
  <div>
    <van-nav-bar title="确认订单">
      <template #left>
        <van-icon
          name="arrow-left"
          size="25"
          color="black"
          @click="$router.back()"
        />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="25" color="black" />
      </template>
    </van-nav-bar>
    <div class="address">
      <span>
        <p>{{ address[0].name }}{{ address[0].tel }}</p>
        <p>
          {{ address[0].province }}{{ address[0].city }}{{ address[0].county }}
        </p>
        <strong>{{ address[0].county }}{{ address[0].addressDetail }}{{ address[0].address}}</strong>
      </span>
      <span @click="$router.push('/address')">></span>
    </div>

    <van-card
      v-for="item in orderlist"
      :key="item.proid"
      :num="item.num"
      :price="item.originprice"
      :title="item.proname"
      class="goods-card"
      :thumb="item.img1"
    />
    <van-submit-bar :price="SumMoney" button-text="在线支付" @submit="onSubmit">
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue';
import { SwipeCell,Toast } from 'vant';

Vue.use(SwipeCell);
import { doCartList, payFor } from "../api/cart";
export default {
  data() {
    return {
      address: JSON.parse(localStorage.getItem("address")),
      orderlist: [],
      cartsList:[]
    };
  },
  created() {
    // console.log(this.address);
    // 发送 获取购物车列表的请求
    doCartList({ userid: localStorage.getItem("id") }).then((res) => {
      // console.log(res.data.data);
      this.cartsList=res.data.data
      res.data.data.forEach((item) => {
        if (item.flag) {
          this.orderlist.push(item);
        }
      });
      console.log(this.orderlist);
    });
  },
  computed: {
    SumMoney() {
      let sum = this.orderlist.reduce((sum, item) => {
        if (item.flag) {
          sum += item.originprice * item.num;
        }
        return sum;
      }, 0);
      return sum * 100;
    },
  },
  methods: {
    onSubmit() {
      if (this.cartsList.some((item) => item.flag == true)) {
        payFor({ userid: localStorage.getItem("id") }).then(() => {
          console.log(this.orderlist);
        });
        this.$router.push("/payfor/"+this.SumMoney);
        } else {
          Toast('请先选择')
      }
    },
  },
};
</script>

<style scoped>
.address {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 6px dashed rgb(233, 150, 150);
  margin-bottom: 0.1rem;
}
.address span:nth-of-type(2) {
  color: cadetblue;
  font-size: 20px;
}
.address p {
  font-size: 12px;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
</style>